JavaScript 'this' bog'lanishi: Kontekstni almashtirish va strelkali funksiyalar xatti-harakatini mukammal o'zlashtirish

JavaScript'dagi this kalit so'zi kuchli, ammo ko'pincha chalg'ituvchi tushunchadir. U funksiyaning bajarilish kontekstiga ishora qiladi va funksiya qaysi obyekt ustida ishlayotganini belgilaydi. this qanday ishlashini tushunish, ayniqsa murakkab ilovalarda to'g'ri va qo'llab-quvvatlanadigan JavaScript kodini yozish uchun juda muhimdir. Ushbu qo'llanma this'ni tushuntirishga, uning turli kontekstlarini, uni qanday boshqarishni va strelkali funksiyalarning o'ziga xos xatti-harakatlarini qamrab olishga qaratilgan. Biz joylashuvingiz yoki madaniyatingizdan qat'i nazar, tushunarlilikni ta'minlash uchun butun dunyo dasturchilari uchun dolzarb bo'lgan amaliy misollarni ko'rib chiqamiz.

Standart 'this' bog'lanishini tushunish

JavaScript'da this qiymati funksiya qanday chaqirilishiga qarab, ish vaqtida aniqlanadi. Standart bog'lanish qoidalari quyidagicha:

1. Global Kontekst

Funksiya global kontekstda (ya'ni, obyekt yoki boshqa funksiya ichida emas) chaqirilganda, this global obyektga ishora qiladi. Brauzerlarda bu odatda window obyekti. Node.js'da esa bu global obyekti. E'tibor bering, qat'iy rejimda ("use strict";), this global kontekstda undefined bo'ladi.

Misol (Brauzer):

            function globalFunction() {
  console.log(this === window); // true (qat'iy rejimisiz)
  console.log(this); // window obyekti (qat'iy rejimisiz)
}

globalFunction();

            

              
                Copy
              
            
          

Misol (Node.js):

            function globalFunction() {
  console.log(this === global); // true (qat'iy rejimisiz)
  console.log(this); // global obyekti (qat'iy rejimisiz)
}

globalFunction();

            

              
                Copy
              
            
          

Misol (Qat'iy rejim):

            "use strict";
function globalFunction() {
  console.log(this === undefined); // true
  console.log(this); // undefined
}

globalFunction();

            

              
                Copy
              
            
          

2. Yopiq (Implicit) bog'lanish

Funksiya obyektning metodi sifatida chaqirilganda, this metod chaqirilayotgan obyektga ishora qiladi. Bu yopiq bog'lanish deb nomlanadi, chunki kontekst obyekt tomonidan yashirin tarzda ta'minlanadi.

Misol:

            const myObject = {
  name: "Example Object",
  greet: function() {
    console.log("Salom, mening ismim " + this.name);
  }
};

myObject.greet(); // Natija: Salom, mening ismim Example Object

            

              
                Copy
              
            
          

3. Aniq (Explicit) bog'lanish

JavaScript this qiymatini aniq o'rnatish uchun uchta metodni taqdim etadi – call, apply va bind. Ushbu metodlar yopiq bog'lanish kerakli natijani bermaganida bajarilish kontekstini boshqarish uchun zarurdir.

a. call

call metodi funksiyani belgilangan this qiymati va alohida-alohida uzatilgan argumentlar bilan chaqirish imkonini beradi.

Sintaksis:

            function.call(thisArg, arg1, arg2, ...)

            

              
                Copy
              
            
          

Misol:

            const person = {
  name: "Alice",
  greet: function(greeting) {
    console.log(greeting + ", mening ismim " + this.name);
  }
};

const anotherPerson = {
  name: "Bob"
};

person.greet.call(anotherPerson, "Salom"); // Natija: Salom, mening ismim Bob

            

              
                Copy
              
            
          

b. apply

apply metodi call'ga o'xshaydi, lekin argumentlarni massiv sifatida qabul qiladi.

Sintaksis:

            function.apply(thisArg, [argsArray])

            

              
                Copy
              
            
          

Misol:

            const person = {
  name: "Alice",
  greet: function(greeting, punctuation) {
    console.log(greeting + ", mening ismim " + this.name + punctuation);
  }
};

const anotherPerson = {
  name: "Bob"
};

person.greet.apply(anotherPerson, ["Salom", "!"]); // Natija: Salom, mening ismim Bob!

            

              
                Copy
              
            
          

c. bind

bind metodi yangi funksiya yaratadi, u chaqirilganda uning this kalit so'zi berilgan qiymatga o'rnatiladi. call va apply'dan farqli o'laroq, bind funksiyani darhol chaqirmaydi; u keyinroq chaqirilishi mumkin bo'lgan yangi funksiyani qaytaradi.

Sintaksis:

            function.bind(thisArg, arg1, arg2, ...)

            

              
                Copy
              
            
          

Misol:

            const person = {
  name: "Alice",
  greet: function(greeting) {
    console.log(greeting + ", mening ismim " + this.name);
  }
};

const anotherPerson = {
  name: "Bob"
};

const greetBob = person.greet.bind(anotherPerson, "Salom");
greetBob(); // Natija: Salom, mening ismim Bob

            

              
                Copy
              
            
          

4. Yangi (New) bog'lanish

Funksiya new kalit so'zi bilan chaqirilganda, yangi obyekt yaratiladi va this o'sha yangi obyektga bog'lanadi. Bu odatda obyektning xususiyatlarini ishga tushirish uchun konstruktor funksiyalarida qo'llaniladi.

Misol:

            function Person(name) {
  this.name = name;
  this.greet = function() {
    console.log("Salom, mening ismim " + this.name);
  };
}

const alice = new Person("Alice");
alice.greet(); // Natija: Salom, mening ismim Alice

            

              
                Copy
              
            
          

Strelkali funksiyalar va leksik 'this'

ECMAScript 6 (ES6) da taqdim etilgan strelkali funksiyalar (() => {}) this'ga nisbatan o'ziga xos xatti-harakatga ega. Oddiy funksiyalardan farqli o'laroq, strelkali funksiyalarning o'z this bog'lanishi yo'q. Buning o'rniga, ular this qiymatini atrofdagi doiradan meros qilib oladi, bu leksik doira (lexical scoping) deb nomlanadi. Bu shuni anglatadiki, strelkali funksiya ichidagi this uni o'rab turgan funksiya yoki doiraning this qiymatiga ishora qiladi.

this'ning bunday leksik bog'lanishi kodni soddalashtirishi va an'anaviy funksiya bog'lanishlari bilan bog'liq keng tarqalgan xatoliklarning oldini olishi mumkin, ayniqsa qayta chaqiruvlar (callbacks) va ichki funksiyalar bilan ishlashda.

Misol:

            const myObject = {
  name: "Example Object",
  greet: function() {
    setTimeout(() => {
      console.log("Salom, mening ismim " + this.name); // this myObject'ga ishora qiladi
    }, 1000);
  }
};

myObject.greet(); // Natija (1 soniyadan so'ng): Salom, mening ismim Example Object

            

              
                Copy
              
            
          

Yuqoridagi misolda, setTimeout ichidagi strelkali funksiya this'ni greet funksiyasidan meros qilib oladi, u esa myObject'ga bog'langan. Agar strelkali funksiya o'rniga oddiy funksiya ishlatilganida, to'g'ri kontekstga kirish uchun .bind(this) dan foydalanish yoki this'ni o'zgaruvchida saqlash (masalan, const self = this;) kerak bo'lardi.

Oddiy funksiya bilan taqqoslash:

            const myObject = {
  name: "Example Object",
  greet: function() {
    const self = this; // 'this'ni saqlab olish
    setTimeout(function() {
      console.log("Salom, mening ismim " + self.name); // 'self'dan foydalanish kerak
    }, 1000);
  }
};

myObject.greet();

            

              
                Copy
              
            
          

'this' bog'lanish qoidalarining ustunligi

Bir nechta bog'lanish qoidalari qo'llanilganda, JavaScript this qiymatini aniqlash uchun ma'lum bir ustunlik tartibiga amal qiladi:

1. Yangi bog'lanish: Agar funksiya new bilan chaqirilsa, this yangi yaratilgan obyektga ishora qiladi.
2. Aniq bog'lanish: Agar call, apply, yoki bind ishlatilsa, this aniq ko'rsatilgan qiymatga o'rnatiladi.
3. Yopiq bog'lanish: Agar funksiya obyektning metodi sifatida chaqirilsa, this o'sha obyektga ishora qiladi.
4. Standart bog'lanish: Agar yuqoridagi qoidalarning hech biri to'g'ri kelmasa, this global obyektga (yoki qat'iy rejimda undefined'ga) ishora qiladi.

Strelkali funksiyalar o'zlarining leksik this'lari bilan bu qoidalarni chetlab o'tadilar va this'ni o'zlarining atrofidagi doiradan meros qilib oladilar.

Keng tarqalgan qo'llash holatlari va misollar

this'ni tushunish turli JavaScript ssenariylarida juda muhimdir. Quyida ba'zi keng tarqalgan qo'llash holatlari keltirilgan:

1. Hodisa ishlovchilari

Hodisa ishlovchilarida (masalan, tugmani bosish, formani yuborishga javob berish), this odatda hodisani keltirib chiqargan DOM elementiga ishora qiladi.

Misol (Brauzer):

            <button id="myButton">Meni bosing</button>

<script>
  const button = document.getElementById("myButton");
  button.addEventListener("click", function() {
    console.log(this === button); // true
    this.textContent = "Bosildi!"; // Tugma matnini o'zgartirish
  });
</script>

            

              
                Copy
              
            
          

Hodisa ishlovchilarida strelkali funksiyalardan foydalanish, agar hodisani keltirib chiqargan elementga kirish kerak bo'lsa, qiyin bo'lishi mumkin, chunki this elementga bog'lanmaydi. Bunday hollarda, oddiy funksiyadan foydalanish yoki hodisa obyektiga (event.target) kirish maqsadga muvofiqroqdir.

2. Obyektga yo'naltirilgan dasturlash (OYD)

OYDda this obyektning metodlari ichida obyekt xususiyatlari va metodlariga kirish uchun asosiy vositadir. Bu ma'lumotlar va xatti-harakatlarni o'z ichiga olgan sinflar va obyektlarni yaratish uchun zarurdir.

Misol:

            class Rectangle {
  constructor(width, height) {
    this.width = width;
    this.height = height;
  }

  getArea() {
    return this.width * this.height;
  }
}

const myRectangle = new Rectangle(10, 5);
console.log(myRectangle.getArea()); // Natija: 50

            

              
                Copy
              
            
          

3. Qayta chaqiruvlar (Callbacks)

Qayta chaqiruvlardan (masalan, asinxron operatsiyalarda) foydalanganda, this qiymati oldindan aytib bo'lmaydigan bo'lishi mumkin. Strelkali funksiyalardan foydalanish leksik this'ni saqlab qolish orqali kodni soddalashtirishi mumkin.

Misol:

            function fetchData(callback) {
  // Asinxron operatsiyani simulyatsiya qilish
  setTimeout(() => {
    const data = { message: "Ma'lumotlar muvaffaqiyatli olindi" };
    callback(data);
  }, 1000);
}

const myObject = {
  name: "Mening obyektim",
  processData: function() {
    fetchData((data) => {
      console.log(this.name + ": " + data.message); // 'this' myObject'ga ishora qiladi
    });
  }
};

myObject.processData(); // Natija (1 soniyadan so'ng): Mening obyektim: Ma'lumotlar muvaffaqiyatli olindi

            

              
                Copy
              
            
          

4. Yopilishlar (Closures)

Yopilishlar (Closures) ba'zan this bilan kutilmagan tarzda o'zaro ta'sir qilishi mumkin. Yopilishlar o'zgaruvchilarni, jumladan this'ni qanday qamrab olishini tushunish muhimdir.

Misol:

            function createCounter() {
  let count = 0;
  return {
    increment: function() {
      count++;
      console.log(count);
    },
    getCount: function() {
      return count;
    }
  };
}

const counter = createCounter();
counter.increment(); // Natija: 1
counter.increment(); // Natija: 2
console.log(counter.getCount()); // Natija: 2

            

              
                Copy
              
            
          

Kamchiliklar va eng yaxshi amaliyotlar

this moslashuvchanlikni ta'minlasa-da, u keng tarqalgan xatoliklarga ham olib kelishi mumkin. Quyida e'tibor berish kerak bo'lgan ba'zi kamchiliklar va rioya qilish kerak bo'lgan eng yaxshi amaliyotlar keltirilgan:

• Hodisa ishlovchilarida 'this'ni yo'qotish: Hodisa tinglovchilaridan foydalanganda this to'g'ri bog'langanligiga ishonch hosil qiling. .bind() yoki strelkali funksiyalardan foydalanishni yoki hodisa nishoniga to'g'ridan-to'g'ri kirishni o'ylab ko'ring.
• Qayta chaqiruvlarda 'this'ni chalkashtirish: Qayta chaqiruvlardan, ayniqsa asinxron operatsiyalarda foydalanganda kontekstga e'tiborli bo'ling. Strelkali funksiyalar buni ko'pincha soddalashtirishi mumkin.
• Aniq bog'lanishdan ortiqcha foydalanish: call, apply va bind kuchli bo'lsa-da, ulardan ortiqcha foydalanishdan saqlaning. Yopiq bog'lanish yoki strelkali funksiyalar kerakli natijaga aniqroq erisha oladimi yoki yo'qligini ko'rib chiqing.
• Qat'iy rejimda 'this': Yodda tutingki, qat'iy rejimda global kontekstda this undefined bo'ladi.
• Leksik 'this'ni tushunish: Strelkali funksiyalar this'ni atrofdagi doiradan meros qilib olishini yodda tuting, bu foydali bo'lishi mumkin, ammo ehtiyotkorlikni talab qiladi.

Xalqaro jihatlar

Global auditoriya uchun ishlab chiqishda, dasturchining joylashuvi yoki madaniy kelib chiqishidan qat'i nazar, oson qo'llab-quvvatlanadigan va tushunarli kod yozish muhimdir. this'dan aniq va izchil foydalanish, to'liq hujjatlar bilan birga, kodingiz butun dunyo dasturchilari uchun tushunarli bo'lishini ta'minlashga yordam beradi. Izchil nomlash qoidalaridan foydalanish va haddan tashqari murakkab naqshlardan qochish ham o'qish qulayligini oshirishi mumkin.

Masalan, kodingizda yoki izohlaringizda tilga yoki madaniyatga xos atamalardan foydalanishdan saqlaning. Turli jamoalar va mintaqalar bo'ylab o'zaro hamkorlikni rivojlantirish uchun standart JavaScript amaliyotlari va qoidalariga rioya qiling.

Xulosa

JavaScript'da this kalit so'zini o'zlashtirish mustahkam, qo'llab-quvvatlanadigan va kengaytiriladigan ilovalarni yozish uchun zarurdir. Turli bog'lanish qoidalarini, strelkali funksiyalarning xatti-harakatlarini va keng tarqalgan kamchiliklarni tushunish sizga samarali va tushunish oson bo'lgan kod yozish imkoniyatini beradi. Eng yaxshi amaliyotlarga rioya qilish va global kontekstni hisobga olish orqali siz butun dunyo dasturchilari uchun qulay va qo'llab-quvvatlanadigan JavaScript ilovalarini yaratishingiz mumkin. Bu tushuncha xalqaro sharoitlarda samarali jamoaviy ishlash imkonini beradi.

this haqidagi tushunchangizni mustahkamlash uchun turli ssenariylar va misollar bilan mashq qilishni davom eting. Ushbu fundamental tushunchani puxta egallaganingizdan so'ng, siz eng murakkab JavaScript muammolarini hal qilishga yaxshi tayyor bo'lasiz.